<!-- 项目单详情 -->
<template>
  <div>
    <Dialog :title="title" :visible="visible" :reveal="false" :loading="loading" class="two-columns" @close="handleClose">
      <!-- <p class="ps"><strong>顾客</strong></p> -->
      <!-- <div class="headStyle">
        <span>{{ projectDetails.customerName }}（{{ projectDetails.customerPhone }}）</span><span>性别：女</span><span>年龄：25</span><span>会员号：{{ projectDetails.customerCode }}</span>
      </div> -->
      <UserInfo :info-id="projectDetails.customerId" />
      <div class="projectInformation">
        <div class="headStyle marginTop">
          <span>项目单号：{{ projectDetails.productNo }}</span>
          <span>名称：{{ projectDetails.projectName }}</span>
        </div>
        <div class="headStyle marginTop">
          <span>类型：{{ projectDetails.productAttributes }}</span>
          <span>价格：{{ projectDetails.price }}</span>
        </div>
        <div class="headStyle marginTop">
          <span>开单人：{{ projectDetails.orderMan }}</span>
          <span>状态：{{ projectDetails.status }}</span>
        </div>
        <div class="headStyle marginTop">
          <span>剩余有效期：{{ projectDetails.remnantCount }}</span>
          <span>剩余次数：{{ projectDetails.usageCount }}</span>
        </div>
        <div v-if="activeName === '1'" class="headStyle marginTop">
          <span>主治医生：{{ projectDetails.attendingDoctor }}</span>
          <span>收款时间：{{ projectDetails.collectionTime }}</span>
        </div>
        <div class="headStyle marginTop">
          <span>未划扣金额：{{ projectDetails.notDeductedAmount? projectDetails.notDeductedAmount: "0" }}</span>
        </div>
      </div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="划扣记录" name="1" />
        <!-- <el-tab-pane label="复查记录" name="2" /> -->
        <el-tab-pane label="病历记录" name="3" />
        <el-tab-pane label="处方单" name="4" />
        <!-- <el-tab-pane label="照片" name="5">
          <el-row type="flex" justify="flex-start" class="photoStyle">
            <el-col :span="6">
              <p>治疗前</p>
              <span>照片</span>
              <p>照片名称1</p>
              <p>2020-12-02 20:30:30</p>
            </el-col>
            <el-col :span="6">
              <p>治疗中</p>
              <span>照片</span>
              <p>照片名称2</p>
              <p>2020-12-02 20:30:30</p>
            </el-col>
            <el-col :span="6">
              <p>治疗后</p>
              <span>照片</span>
              <p>照片名称3</p>
              <p>2020-12-02 20:30:30</p>
            </el-col>
          </el-row>
        </el-tab-pane> -->
      </el-tabs>
      <el-table v-show="activeName !== '5'" v-loading="loading" :data="chargeTableData">
        <el-table-column
          v-if="activeName === '1' || activeName === '2'"
          :key="Math.random()"
          label="时间"
          prop="deductionTime"
        />
        <el-table-column
          v-if="activeName === '1'"
          :key="Math.random()"
          label="划扣次数"
          prop="executionQuantity"
        />
        <el-table-column
          v-if="activeName === '1'"
          :key="Math.random()"
          label="划扣金额"
          prop="deductionAmount"
        />
        <el-table-column
          v-if="activeName === '3'"
          :key="Math.random()"
          label="创建时间"
          prop="createDatetime"
        />
        <el-table-column
          v-if="activeName === '4'"
          :key="Math.random()"
          label="开单时间"
          prop="drawerTime"
        />
        <el-table-column
          v-if="activeName === '4'"
          :key="Math.random()"
          label="处方单号"
          prop="prescriptionNo"
        />
        <el-table-column
          v-if="activeName === '4'"
          :key="Math.random()"
          label="开单人"
          prop="drawerName"
        />
        <el-table-column
          v-if="activeName === '3'"
          :key="Math.random()"
          label="病历编号"
          prop="no"
        />
        <el-table-column
          v-if="activeName === '3'"
          :key="Math.random()"
          label="病历类型"
          prop="medicalRecordType"
        />
        <el-table-column
          v-if="activeName === '1'"
          :key="Math.random()"
          label="划扣人"
          prop="deductionName"
        />
        <el-table-column
          v-if="activeName === '2'"
          :key="Math.random()"
          label="记录人"
          prop="medicinesSpec"
        />
        <el-table-column
          v-if="activeName === '3'"
          :key="Math.random()"
          label="创建人员"
          prop="creatorName"
        />
        <el-table-column
          v-if="activeName === '3' || activeName === '4'"
          :key="Math.random()"
          label="审核人"
          prop="reviewerName"
        />
        <el-table-column
          v-if="activeName === '3' || activeName === '4'"
          :key="Math.random()"
          label="状态"
          prop="status"
        />
        <el-table-column
          v-if="activeName === '3'"
          :key="Math.random()"
          label="存放位置"
          prop="location"
        />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="detailsBtn(scope.row,true)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="all-margin-bottom" />
    </Dialog>
    <Details :visible.sync="visibleDetails" :current-row.sync="currentRow" @close="visibleDetails = false;" />
    <OrderDetails :visible.sync="visibleOrder" :customer-id="customerId" :medical-details-id="MedicalDetailsId" @seeDetails="detailsBtn" />
    <MedicalDetails :visible.sync="visibleMedical" :customer-id="customerId" :medical-details-id="MedicalDetailsId" @seeDetails="detailsBtn" />
  </div>
</template>

<script>
import Dialog from "@/components/Dialog/index";
import UserInfo from "@/components/UserInformation";
import Details from "../../diagnose/drawrecord/details";
import OrderDetails from "../../medical/medicals/medicalDetails";
import MedicalDetails from "../../diagnose/prescription/medicalDetails";
export default {
  components: {
    Dialog,
    UserInfo,
    Details,
    OrderDetails,
    MedicalDetails,
  },
  props: {
    title: {
      type: String,
      default: "",
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      projectDetails: {},
      chargeTableData: [],
      activeName: '1',
      currentRow: {},
      customerId: 0,
      MedicalDetailsId: '',
      visibleDetails: false,
      visibleOrder: false,
      visibleMedical: false,
      loading: false,
    };
  },
  methods: {
    async toViewBtn(id) {
      const res = await this.$api["department/projectmenu/projectListDetails"]({ id: id });
      if (res.code !== 200) return this.$message.error("查看项目单详情失败！");
      this.projectDetails = res.data;
      this.$set(this.projectDetails, 'notDeductedAmount', Number(this.projectDetails.notDeductedAmount).toFixed(2));
      this.getTabsData();
    },
    handleClick(tab) {
      this.activeName = tab.name;
      this.getTabsData();
    },
    getTabsData() {
      if (this.activeName === "1") {
        this.chargeTableData = this.projectDetails.deductionRecordDtoList;
        this.chargeTableData.map(item => {
          item.deductionAmount = Number(this.projectDetails.deductionAmount).toFixed(2);
        });
      } else if (this.activeName === "3") {
        this.chargeTableData = this.projectDetails.medicalRecordDtoList;
      } else {
        this.chargeTableData = this.projectDetails.prescriptionListDtoList;
      }
    },
    // 项目单详情-详情
    async detailsBtn(row, bool) {
      if (this.activeName === "1") {
        const res = await this.$api['department/drawrecord/recordDetails']({ id: row.id });
        if (res.code !== 200) return this.$message.error(res.msg);
        this.currentRow = res.data;
        const list = [];
        const json = {
          customerName: this.currentRow.customerName,
          projectName: this.currentRow.projectName,
          executionQuantity: this.currentRow.executionQuantity,
        };
        list.push(json);
        this.$set(this.currentRow, 'customerList', list);
        this.visibleDetails = true;
      } else if (this.activeName === "3") {
        if (row.id) {
          this.MedicalDetailsId = row.id;
          this.customerId = row.customerId;
        }
        if (!bool) {
          this.MedicalDetailsId = "";
        }
        this.visibleOrder = bool;
      } else {
        if (row.id) {
          this.MedicalDetailsId = row.id;
          this.customerId = row.customerId;
        }
        if (!bool) {
          this.MedicalDetailsId = "";
        }
        this.visibleMedical = bool;
      }
    },
    handleClose() {
      this.activeName = '1';
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.projectInformation {
  // margin-top: 60px;
  .marginTop {
    margin: 20px 0;
  }
}
.photoStyle {
  p {
    text-align: center;
  }
  span {
    display: block;
    margin: auto;
    width: 120px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    background-color: #aaa;
  }
}
.headStyle{
  span{
    width: 45%;
  }
}
.el-tabs__nav{
  .el-tabs__item{
    padding: 0 20px !important;
  }
}

</style>
